<template>
  <div class="system-dic-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
          <el-form-item label="关键字" prop="ipaddr">
            <el-input
                v-model="queryParams.keywords"
                placeholder="请输入关键字"
                clearable
                style="width: 180px;"
                size="default"
                @keyup.enter.native="dataList"
            />
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="dataList">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button size="default" type="danger" class="ml10" @click="onRowClear()">
              <el-icon>
                <ele-Delete />
              </el-icon>
              清空日志
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="logs" style="width: 100%">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="time" prop="createdAt" />
        <el-table-column label="source" >
          <template #default="scope">
          <el-tag type="danger">{{scope.row.source}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="message" prop="msg"  :show-overflow-tooltip="true"/>
        <el-table-column label="code" align="center" prop="code"/>
        <el-table-column label="line" align="center"  prop="line"/>
        <el-table-column label="trace" prop="traceShort"  :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" class-name="small-padding" min-width="120px" fixed="right">
          <template #default="scope">
            <el-button
                size="small"
                type="primary"
                text
                @click="handleView(scope.row)"
            >详情</el-button>
            <el-button
                size="small"
                type="danger"
                text
                @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="list-pagination">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <ExceptionLogDetail
        ref="exceptionDetailRef"
    ></ExceptionLogDetail>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { getExceptionLogs } from '/@/api/system/monitor/exceptionLog';
import ExceptionLogDetail from "/@/views/system/monitor/exceptionLog/component/detail.vue"

export default defineComponent({
  name: 'apiV1SystemExceptionLogList',
  components: {ExceptionLogDetail},
  setup() {
    const exceptionDetailRef = ref();
    const state = reactive({
      queryParams: {
        keywords: "",
        pageNum: 1,
        pageSize: 20,
      },
      logs: [],
      total: 0,
    });
    // 初始化表格数据
    const initTableData = () => {
      dataList()
    };
    const dataList=()=>{
      getExceptionLogs(state.queryParams).then((res:any)=>{
        state.logs = res.data.list;
        state.total = res.data.total;
        state.queryParams.pageNum = res.data.pageNum;
        state.queryParams.pageSize = res.data.pageSize;
      });
    };

    const handleSizeChange = (_size: number) => {
      state.queryParams.pageNum = 1
      state.queryParams.pageSize = _size
      dataList();
    };
    const handleCurrentChange = (_page: number) => {
      state.queryParams.pageNum = _page
      dataList();
    };
    const onRowClear = () => {
    };
    const handleView = (_row: any) => {
      exceptionDetailRef.value.openDialog(_row);
    };
    const handleDelete = (_row: any) => {
    };
    // 页面加载时
    onMounted(() => {
      initTableData();
    });
    return {
      exceptionDetailRef,
      dataList,
      handleSizeChange,
      handleCurrentChange,
      handleView,
      onRowClear,
      handleDelete,
      ...toRefs(state),
    };
  },
});
</script>
